<template>
  <!-- 主页面左侧组件列表项 -->
  <div class="vy-theme-edit">
    <a-form class="vy-modal-content">
      <a-form-item class="vy-modal-fitem">
        <a-row>
          <a-col>
            <a-input placeholder="请输入主题名称" allowClear v-model="editTheme.name" class="vy-modal-title"/>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item class="vy-modal-fitem" v-if="mode == '2'">
        <a-row>
          <a-col :span="10">
            <a-date-picker
              :showTime="{ defaultValue: moment(editTheme.startTime, 'YYYY-MM-DD HH:mm:ss') }"
              format="YYYY-MM-DD HH:mm:ss"
              :defaultValue="editTheme.startValue" 
              v-model="editTheme.startValue"
              placeholder="Start"
              :disabledDate="disabledStartDate"
              style="width:100%"
              @change="change_date_start">
              <a-icon slot="suffixIcon" type="clock-circle" />
            </a-date-picker>
          </a-col>
          <a-col :span="2" style="text-align:center;">-</a-col>
          <a-col :span="10">
            <a-date-picker
              :showTime="{ defaultValue: moment(editTheme.endTime, 'YYYY-MM-DD HH:mm:ss') }"
              format="YYYY-MM-DD HH:mm:ss"
              :defaultValue="editTheme.endValue" 
              v-model="editTheme.endValue"
              placeholder="End"
              :disabledDate="disabledEndDate"
              style="width:100%"
              @change="change_date_end">
              <a-icon slot="suffixIcon" type="clock-circle" />
            </a-date-picker>
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: "vy-theme-edit",
  data() {
    return {
      moment,
      // 编辑主题对象
      editTheme: {
        id: "", // 主题Id
        name: "", // 主题名称
        startValue: null, // 开始时间
        endValue: null, // 结束时间
        startTime: "", // 开始时间
        endTime: "" // 结束时间
      },
      mode: null // 模式 1: 打卡模式; 2: 面授模式 3: 闯关模式
    };
  },
  props: {
    source: {
      type: Object,
      required: true,
      default() {
        return {
          id: "", // 主题Id
          name: "", // 主题名称
          startValue: null, // 开始时间
          endValue: null, // 结束时间
          startTime: "", // 开始时间
          endTime: "" // 结束时间
        };
      }
    }
  },
  watch: {
    source: {
      deep: true,
      handler(obj) {
        this.setEditThemeInfo(obj);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setMode();
      this.setEditThemeInfo(this.source);
    });
  },
  methods: {
    setMode() {
      let _mode = this.$route.query.mode;
      if (!_mode) {
        // 兼容从缓存取项目模式
        _mode = sessionStorage.getItem("proType") || "";
      }
      this.mode = _mode;
    },
    setEditThemeInfo(obj) {
      this.editTheme = Object.assign({}, obj);
      if (this.editTheme.startTime && !this.editTheme.startValue) {
        this.editTheme.startValue = moment(this.editTheme.startTime);
      }
      if (this.editTheme.endTime && !this.editTheme.endValue) {
        this.editTheme.endValue = moment(this.editTheme.endTime);
      }
    },
    // 限制时间选择
    disabledStartDate(startValue) {
      const _endValue = this.editTheme.endValue;
      if (!startValue || !_endValue) {
        return false;
      }
      return startValue.valueOf() > _endValue.valueOf();
    },
    // 限制时间选择
    disabledEndDate(endValue) {
      const _startValue = this.editTheme.startValue;
      if (!endValue || !_startValue) {
        return false;
      }
      return _startValue.valueOf() > endValue.valueOf();
    },
    change_date_start(value, dateString) {
      this.$set(this.editTheme, "startTime", dateString);
    },
    change_date_end(value, dateString) {
      this.$set(this.editTheme, "endTime", dateString);
    },
    // 返回表单数据
    getFormData() {
      return {
        id: this.editTheme.id || "", // 主题Id
        name: this.editTheme.name || "", // 主题名称
        startTime: this.editTheme.startTime || "", // 开始时间
        endTime: this.editTheme.endTime || "" // 结束时间
      };
    }
  }
};
</script>

<style lang="scss">
.vy-theme-edit {
  .vy-modal-content {
    .vy-modal-fitem {
      margin-bottom: 0;
      .vy-modal-title {
        border: none;
        border-bottom: 1px solid rgba(51, 102, 255, 1);
        .ant-input {
          border: 0;
        }
      }
    }
  }
}
</style>
